<template>
  <div>
    <h1>Scoped</h1>

    <div id="parent" class="box">parent</div>

    <!-- 
        attributes:  a=1   b=2
        默认情况下 attributes 将会被添加到子组件的根节点上
     -->
    <Child a="1" b="2"></Child>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TestScoped",
});
</script>

<script lang="ts" setup>
import Child from "./child.vue";

/**
 * attributes
 *  赋值给组件标签的属性
 */
</script>

<style scoped>
:deep(.box) {
  background-color: red;
}
</style>
